<script setup lang="ts">
import screen from '/@/assets/Test1.jpeg'
import {useUserFriendStore, useWebSocketStore} from "/@/store"
import {storeToRefs} from "pinia";
import {ContactVo} from "/@/api/openapi";
import {Search} from "@element-plus/icons-vue";

const userFriendStore = useUserFriendStore();
const webSocketStore = useWebSocketStore();

const {contactList} = storeToRefs(userFriendStore);
const {currentRoomId} = storeToRefs(webSocketStore);
const formatDate = (date: string) => {
    const now = new Date();
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const inputDate = new Date(date);
    // 如果是今天
    if (inputDate >= today) {
        // 返回小时和分钟
        return inputDate.getHours() + ':' + inputDate.getMinutes();
    } else {
        // 否则返回年月日
        return inputDate.getFullYear() + '/' + (inputDate.getMonth() + 1) + '/' + inputDate.getDate();
    }
}

const change = (item: number | undefined) => {
    if (item !== undefined) {
        currentRoomId.value = item;
    }
}
const input1 = ref<string>("")
</script>

<template>
    <div class="conversation-container">
        <div class="input">
            <el-input
                    v-model="input1"
                    placeholder="Please Input"
                    :suffix-icon="Search"
            />
        </div>
        <div class="chat-ul">
            <div class="chat-li" v-for="(item,index) in contactList" :key="index" @click="change(item.roomId)">
                <el-row :gutter="10">
                    <el-col :span="6" class="chat-list-left">
                        <el-avatar shape="square" class="image" :size="36" :src="item.avatar"/>
                    </el-col>
                    <el-col :span="18" class="chat-list-center">
                        <div class="top">
                            <div class="title">
                                <span class="name">{{ item.name }}</span>
                                <span class="special">官方</span>
                            </div>
                            <div class="time">
                                <p>{{ formatDate(item.activeTime) }}</p>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="last-message-desc">
                                <p> {{ item.text }}</p>
                            </div>
                            <div>
                             <span class="unread" v-if="item.unreadCount !== undefined && item.unreadCount>0">
                               {{ item.unreadCount === undefined ? 0 : item.unreadCount }}
                           </span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
$height-variable: 60px;

.conversation-container {
  height: calc(100vh - 120px);
  border-right: 1px solid #e5e5e5;

  .input {
    padding: 5px;
  }
}

.chat-ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden; /* 隐藏水平滚动条 */
  .chat-li:hover {
    background-color: #e0e0df;
  }

  .hover {
    background-color: #e0e0df;
  }

  .chat-li {
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    height: calc($height-variable + 10px);
    border-bottom: 1px solid #dcdfe6;

    .chat-list-left {
      height: $height-variable;
      line-height: $height-variable;
      //display: grid;
      display: flex;
      /*主轴居中对齐*/
      justify-content: center;
      /*侧轴居中对齐*/
      align-items: center;
    }

    .chat-list-center {
      display: flex;
      flex-direction: column;
      justify-content: space-between; /* 在主轴方向上分配空间 */
      font-size: 14px;

      .top {
        text-align: left;
        height: calc(#{$height-variable} / 2);
        display: flex;
        line-height: calc(#{$height-variable} / 2);
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出div容器的内容 */
        position: relative;
        text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
        .time {
          //top: 5px;
          position: absolute;
          right: 5px;
          color: grey;
          font-size: 10px;
        }

        .title {
          display: flex;

          .name {
            max-width: 80px;
            white-space: nowrap; /* 防止文本换行 */
            overflow: hidden; /* 隐藏超出div容器的内容 */
            text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
          }

          .special {
            margin: 3px;
            line-height: calc(#{$height-variable} / 2 - 6px);
            color: #c59512;
            font-size: 12px;
            font-weight: bold;
            margin-left: 4px;
            border-radius: 4px;
            background-color: #efe2bb;
            transform: scale(0.8);
          }
        }
      }

      .bottom {
        text-align: left;
        height: calc(#{$height-variable} / 2);
        display: flex;
        line-height: calc(#{$height-variable} / 2);
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出div容器的内容 */
        text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
        position: relative;

        .last-message-desc {
          display: flex;
          justify-content: space-between;
          color: #acacac;
          font-size: 14px;
          margin-top: -5px;;
        }

        .unread {
          position: absolute;
          right: 5px;
          height: 20px;
          line-height: 20px;
          width: 20px;
          font-size: 12px;
          //flex: 1; /* 子元素平均分配空间 */
          text-align: center; /* 文本水平居中 */
          align-content: center;
          color: white;
          align-items: center; /* 垂直居中 */
          background-color: #d0cfd1; /* 设置背景颜色为灰色 */
          border-radius: 50%; /* 设置border-radius为50%来创建圆形 */
          /* 可以添加更多样式来美化div */
        }
      }
    }
  }
}


</style>